<!-- 课程信息 -->
<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom:40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目"/>
      </el-form-item>

        <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
          <el-option v-for="subject in subjectOneList"
             :key="subject.id"
             :label="subject.title"
             :value="subject.id"/>
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option v-for="subject in subjectTwoList"
             :key="subject.id"
             :label="subject.title"
             :value="subject.id"/>
        </el-select>
      </el-form-item>


       <!-- 课程讲师 TODO -->
       <el-form-item label="课程讲师">
         <el-select v-model="courseInfo.teacherId" placeholder="请选择...">
           <el-option v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
         </el-select>
       </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum"
            controls-position="right"
            placeholder=""/>
      </el-form-item>

       <!-- 课程简介 TODO -->
       <el-form-item label="课程简介">
         <!-- <el-input v-model="courseInfo.description" placeholder="课程简介"/> -->
         <tinymce :heigh="300" v-model="courseInfo.description"/>
       </el-form-item>

       <!-- 课程封面 TODO -->
      <el-form-item label="课程封面">
          <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss'"
          class="avatar-uploader">
          <img :src="courseInfo.cover">
          </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price"
            controls-position="right"
            placeholder=""/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import course from '@/api/edu/course.js'
import subject from '@/api/edu/subject.js'
import Tinymce from '@/components/Tinymce'    //引入富文本组件
export default{
  components:{
    Tinymce
  },
  data(){
    return{
      courseInfo: {
        id: '',     //课程基本信息的id
         title: '',
         subjectId: '', //二级分类id
         subjectParentId: '', //一级分类id
         teacherId: '',
         lessonNum: 0,
         description: '',
         cover: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
         price: 0
      },
      saveBtnDisabled: false,
      teacherList: [],    //讲师列表
      subjectOneList: [], //一级分类
      subjectTwoList: [], //二级分类
      BASE_API: process.env.BASE_API, // 接口API地址
      courseId: '',       //回显的课程id
    }
  },
  watch:{ //监听
    $route(to, from){ //路由变化的方式，当路由发生变化，方法就会执行
      this.init();
    }
  },
  created(){
    this.init();
  },
  methods:{
    //初始化方法
    init(){
      if(this.$route.params && this.$route.params.id){
        this.courseId = this.$route.params.id;
        //调用根据id查询课程的方法
        this.getInfo();
        //初始化所有讲师
        this.getListTeacher();
      }else{
        //初始化所有讲师
        this.getListTeacher();
        //初始化一级分类
        this.getOneSubject();
      }
    },
    //根据课程id查询基本信息
    getInfo(){
      course.getCourseInfoId(this.courseId)
        .then(res => {
          this.courseInfo = res.data.courseInfoVo;
          //1、先查询所有分类（一级和二级）
          subject.getSubjectList()
            .then(resp => {
              //2、获取所有一级分类
              this.subjectOneList = resp.data.list;
              //3、把所有一级分类数组进行遍历，比较当前courseInfo里面的一级分类id和所有的一级分类id
              for(let oneSubject of this.subjectOneList){
                //比较当前courseInfo里面的一级分类id和所有的一级分类id
                if(this.courseInfo.subjectParentId == oneSubject.id){
                  //将一级分类中的children赋给二级分类
                  this.subjectTwoList = oneSubject.children;
                }
              }
            })
        });
    },
    //上传之前调用的方法
    beforeAvatarUpload(file){
      const isJPG = file.type == 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if(!isJPG){
        this.$message.warning('上传头像图片只能是JPG格式！');
      }
      if(!isLt2M){
        this.$message.warning('上传头像大小不能超过2MB！');
      }
      return isJPG && isLt2M;
    },
    //上传封面成功调用的方法
    handleAvatarSuccess(res, file){
      console.log(file);
      this.courseInfo.cover = res.data.url;
    },
    //点击一级分类，触发change，显示二级分类
    subjectLevelOneChanged(value){
      this.courseInfo.subjectId = '';
      //value就是一级分类的value(id)值
      for(let subject of this.subjectOneList){
        if(subject.id === value){
          this.subjectTwoList = subject.children;
        }
      }
    },
    //查询所有的一级分类
    getOneSubject(){
      subject.getSubjectList()
        .then(res => {
          this.subjectOneList = res.data.list;
        });
    },
    //查询所有讲师
    getListTeacher(){
      course.getListTeacher()
        .then(res => {
          this.teacherList = res.data.items;
        });
    },
    //添加课程基本信息
    addCourse(){
      course.addCourseInfo(this.courseInfo)
        .then(res => {
          //提示信息
          this.$message({
            type: 'success',
            message: '添加课程信息成功'
          });
          //跳转到第二步
          this.$router.push({path: '/course/chapter/' + res.data.courseId});
        });
    },
    //修改课程基本信息
    updateCourse(){
      course.updateCourseInfo(this.courseInfo)
        .then(res => {
          //提示信息
          this.$message({
            type: 'success',
            message: '修改课程信息成功'
          });
          //跳转到第二步
          this.$router.push({path: '/course/chapter/' + this.courseId});
        });
    },
    //添加或修改课程基本信息
    saveOrUpdate(){
      if(!this.courseInfo.id){
        //添加
        this.addCourse();
      }else{
        //修改
        this.updateCourse();
      }
    }
  }
}
</script>

/* 富文本的样式 */
.tinymce-container{
  line-height: 29px;
}
</style>
